<template>
  <div :style="{ height: isshow ? '140px' : '80px' }" class="box">
    <el-form ref="form" :model="formdata" label-width="80px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="用电企业">
            <FilterSelect2
              v-model="formdata.orgNo"
              :optionlist="qiyelist"
              @updateModelValue="changeqi"
              :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
            ></FilterSelect2>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="配电室">
            <el-select v-model="formdata.roomId" @change="getcabinet" placeholder="请选择配电室" size="small" style="width:100%">
              <el-option
                v-for="item in peidianlist"
                :key="item.classId"
                :label="item.name"
                :value="item.classId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="屏柜">
            <el-select @change="getbay" v-model="formdata.cabinetId" placeholder="请选择屏柜" size="small" style="width:100%">
              <el-option
                v-for="item in pingguilist"
                :key="item.classId"
                :label="item.name"
                :value="item.classId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template>
          <el-col :span="5" >
            <el-form-item label="回路">
              <el-select v-model="formdata.bayId" multiple collapse-tags placeholder="请选择回路" size="small" style="width:100%">
                <el-option
                  v-for="item in huilulist"
                  :key="item.classId"
                  :label="item.name"
                  :value="item.classId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <template  v-if="isshow">
          <el-col :span="15">
            <el-form-item label="时间">
                  <el-date-picker
                    v-model="formdata.value1"
                    type="daterange"
                    size="small"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="isshow ? 9 : 4" style="text-align: right !important">
          <el-button @click="chong" size="small">重 置</el-button>
          <el-button type="primary" @click="submit" size="small">查 询</el-button>
          <el-button type="text" v-if="isshow" @click="zedie">收起 <i class="el-icon-arrow-up"></i></el-button>
          <el-button type="text" v-else @click="zedie">展开 <i class="el-icon-arrow-down"></i></el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {getRoomListapi,getCabinetListapi,getBayListapi} from '@/api/ElectricalDistribution/hour-power-report'
import { getceshijiekou } from '@/api/ElectricalDistribution/dayreport'
export default {
  name: 'CallPoliceElForm',
  data() {
    return {
      formdata: {
        bayId:[],
        value1:['',''],
        cabinetId:'',
        roomId:''
      },
      qiyelist: [],
      isshow: false,
      peidianlist: [],
      pingguilist: [],
      huilulist: []
    }
  },

  async mounted() {
    const {
      data: { list }
    } = await getceshijiekou()
    this.qiyelist = list
    this.formdata.orgNo = this.$store.state.statistics.userbizOrgNo
      ? this.$store.state.statistics.userbizOrgNo
      : list[0].bizOrgNo
    this.gettime()
    this.$emit('getlist', this.getdata())
    this.changeqi(this.formdata.orgNo)
      
  },

  methods: {
    async changeqi(val) {
      this.$store.commit('setuserobject', val)
      await this.getroom()
      await this.getcabinet()
      await this.getbay()
    },
    submit(){
      this.$emit('getlist', this.getdata())
    },
    // 获取配电室
    async getroom(){
      const {data:{list}}=await getRoomListapi({orgNo:this.formdata.orgNo})
      this.peidianlist=list
      this.formdata.bayId=[]
      this.formdata.cabinetId=''
      this.formdata.roomId=''
    },
    // 获取屏柜
    async getcabinet(){
      const {roomId,orgNo}=this.formdata
      const {data:{list}}=await getCabinetListapi({orgNo,roomId})
      this.pingguilist=list
      this.formdata.bayId=[]
      this.formdata.cabinetId=''
    },
    // 获取回路
    async getbay(){
      const {roomId,orgNo,cabinetId}=this.formdata
      const {data:{list}}=await getBayListapi({orgNo,roomId,cabinetId})
      this.huilulist=list
      this.formdata.bayId=[]
    },
    async chong(){
      this.formdata.orgNo =  this.qiyelist[0].bizOrgNo
      await this.changeqi(this.formdata.orgNo)
      this.gettime()  
      this.$emit('getlist', this.getdata())
    },
    getdata(){
      const {orgNo,roomId,cabinetId,bayId,value1}=this.formdata
      const orgName=this.qiyelist.find(ele=>ele.bizOrgNo==orgNo).bizOrgName
      return {
        orgNo,roomId,cabinetId,bayId:bayId.join(','),
        startDate:value1[0],endDate:value1[1],orgName
      }
    },
    zedie(){
      this.isshow=!this.isshow
      this.$emit('checkshow',this.isshow)
    },
    gettime(){
      this.$set(this.formdata,'value1',[dayjs().format('YYYY-MM')+'-01',dayjs().format('YYYY-MM-DD')])
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 20px;
}
</style>
